<template>
  <div
    class="cms-views-container novel-cataloag-pages"
    :class="type === 1 || type === 2 ? 'bg-white' : ' bg-[#2f3030]'"
  >
    <header
      class="flex items-center justify-between px-4 h-11"
      :class="type === 1 || type === 2 ? 'light-line' : 'dark-line'"
    >
      <span v-if="type === 1 || type === 2">
        <LeftOutlined class="text-base" />
      </span>
      <span v-else class="text-[#929595]">
        <LeftOutlined class="text-base text-[#4B5363]" />
      </span>
      <span class="text-base font-medium" :class="type === 1 || type === 2 ? 'text-[#48494d]' : 'text-[#929595]'"
        >目录</span
      >
      <span class="text-sm" :class="type === 1 || type === 2 ? 'text-[#48494d]' : 'text-[#929595]'">
        {{ type === 1 || type === 3 ? '倒序' : '正序' }}
        <img :src="novelIcons.light_dec" alt="" v-if="type === 1" />
        <img :src="novelIcons.light_rec" alt="" v-if="type === 2" />
        <img :src="novelIcons.night_rec" alt="" v-if="type === 3" />
        <img :src="novelIcons.night_dec" alt="" v-if="type === 4" />
      </span>
    </header>
    <div class="px-4">
      <div class="h-[101px] py-4" :class="type === 1 || type === 2 ? 'light-line' : 'dark-line'">
        <h3
          class="p-0 m-0 mb-2 text-sm font-medium"
          :class="type === 1 || type === 2 ? 'text-black' : 'text-[#929595]'"
        >
          赤侠
        </h3>
        <span class="text-xs" :class="type === 1 || type === 2 ? 'text-[#8f9299]' : 'text-[#929595]'">红烧大黑鱼</span>
        <p class="p-0 m-0 mt-2 text-xs" :class="type === 1 || type === 2 ? 'text-[#b4b8bf]' : 'text-[#5f6161]'">
          更新于 2022/12/31 12:22
        </p>
      </div>
      <div class="flex flex-col" :class="type === 1 || type === 2 ? 'light-style' : 'dark-style'">
        <span
          v-for="(item, index) in catalogList"
          :key="index"
          class="h-[50px] flex items-center justify-between light-line"
          :class="index === 0 || index === 2 || index === 3 ? 'catch-text' : 'no-catch-text'"
        >
          <span>{{ item.title }}</span>
          <span>{{ item.num }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import novelIcons from '../assets/novel'

withDefaults(defineProps<{ type: number }>(), { type: 1 })

const catalogList = [
  {
    title: '扉页',
    num: 1
  },
  {
    title: '第一章 从红月开始',
    num: 4
  },
  {
    title: '第二章 诗与棋',
    num: 25
  },
  {
    title: '第三章 秦老',
    num: 72
  },

  {
    title: '第四章 鱼山书院',
    num: 108
  },
  {
    title: '第五章 未来的样子',
    num: 175
  },
  {
    title: '第六章 明月几时有',
    num: 196
  },
  {
    title: '第七章 华方式',
    num: 268
  },
  {
    title: '第八章 投河的母鸡',
    num: 308
  }
]
</script>

<style scoped lang="less">
.novel-cataloag-pages {
  .light-line {
    border-bottom: 1px solid #f1f3f7;
  }
  .dark-line {
    border-bottom: 1px solid #343535;
  }
  .light-style {
    > span {
      &:nth-child(2) {
        color: #ff613f;
      }
      @apply text-sm;
    }
    .catch-text {
      color: #484a4d;
    }
    .no-catch-text {
      color: #8f9299;
    }
  }
  .dark-style {
    > span {
      &:nth-child(2) {
        color: #eb5e00;
      }
      @apply text-sm;
    }
    .catch-text {
      color: #929595;
    }
    .no-catch-text {
      color: #5f6161;
    }
    .light-line {
      border-bottom: 1px solid #343535;
    }
  }
}
</style>
